<!-- html -->
<template>
  <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="ownerRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="货主名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入货主名称" />
        </el-form-item>
        <el-form-item label="所在城市" prop="city">
          <el-input v-model="form.city" placeholder="请输入所在城市" />
        </el-form-item>
        
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="负责人" prop="personInCharge">
          <el-input v-model="form.personInCharge" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系方式" />
        </el-form-item>
        
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关闭</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<!-- 
      ts
      setup 支持setup语法糖
 -->
<script  setup>
import {reactive, ref, toRefs,defineEmits , getCurrentInstance, watch} from 'vue'

//获取当前组件的实例对象
const proxy = getCurrentInstance();


//接收父组件传过来的事件
const emits = defineEmits(['cancelBox','submitFormBox']);

  //接收父组件传入的参数
  let props = defineProps({
    title:{
      type:String,
      default:null
    },
    open:{
      type:Boolean,
      default:false
    },
    formInfo:{
      type:Object,
      default:null
    }
  });

  //抽离父组件传入的参数，解析成要的属性
  let {title, open} = toRefs(props);

  //定义表单参数
  let form = reactive({
    name: null,
    city: null,
    personInCharge: null,
    address: null,
    phone: null
  });

  let rules = reactive({
    name: [
      { required: true, message: "货主名称不能为空", trigger: "blur" }
    ],
  });

    //定义函数-提交表单
    const submit=()=>{
    //校验表单
    
    proxy.refs.ownerRef.validate( valid => {
      //执行保存
      if (valid) {
        emits('submitFormBox',form)
      }
    })
  };

  //监听器
  watch(()=>props.formInfo,(newValue,oldValue)=>{
    //深克隆
    form = reactive(JSON.parse(JSON.stringify(newValue)))
  },{deep:true});

  //定义函数-取消表单
  const cancel=()=>{
    //调用父组件方法
    emits('cancelBox')
  };

</script>

<!-- css样式 -->
 <style scoped>
</style>